<template>
  <div id="container" />
</template>

<script>
import { Radar } from '@antv/g2plot'

export default {

  mounted() {
    fetch('https://gw.alipayobjects.com/os/antfincdn/svFjSfJkYy/radar.json').then((data) => data.json())
      .then((data) => {
        const radarPlot = new Radar('container', {
          data,
          xField: 'item',
          yField: 'score',
          seriesField: 'user',
          meta: {
            score: {
              alias: '分数',
              min: 0,
              max: 80
            }
          },
          xAxis: {
            line: null,
            tickLine: null,
            grid: {
              line: {
                style: {
                  lineDash: null
                }
              }
            }
          },
          yAxis: {
            line: null,
            tickLine: null,
            grid: {
              line: {
                type: 'line',
                style: {
                  lineDash: null
                }
              }
            }
          },
          // 开启面积
          area: {},
          // 开启辅助点
          point: {
            size: 2
          }
        })
        radarPlot.render()
      })
  }

}
</script>

<style>

</style>
